<template>
	<div>
		<div class="navbar">
			<div class="hearderBoxIcon" @click="goback()">
				<img src="../../assets/images/fanhuijiantou.png" alt="">
			</div>
			<div class="title" v-if="type == 1">转数快</div>
			<div class="title" v-if="type == 2">便利商店增值</div>
			<div class="title" v-if="type == 3">USDT</div>
			<div class="right">
				<img src="../../assets/images/zhuyi3.png" alt="" />
			</div>
		</div>
		<div class="mc-deposit-section">
			<!-- <el-button>USDT H5</el-button> -->
		</div>
		<div class="from" v-if="tep == 1">
			<div class="mc-collection-accordion-label">支付通道</div>
			<div class="mc-collection-opt-warpper">
				<div class="mc-collection-option">
					<div class="mc-collection-information">
						<img v-if="type == 1" class="icon" src="../../assets/images/zsk.webp" alt="" />
						<img v-if="type == 2" class="icon" src="../../assets/images/bld.png" alt="" />
						<img v-if="type == 3" class="icon" src="../../assets/images/usdt.webp" alt="" />
						<div class="mc-collection-content">
							<div class="mc-collection-basic">
								<div class="mc-collection-name" v-if="type == 1">转数快</div>
								<div class="mc-collection-name" v-if="type == 2">便利商店增值</div>
								<div class="mc-collection-name" v-if="type == 3">USDT</div>
								<div class="mc-collection-description">无充值限额</div>
							</div>
							<div class="mc-collection-fee">
								<div class="mc-collection-description">手续费:</div>
								<p class="mc-collection-description">无手续费</p>
							</div>
							<img v-if="showmore" @click="showmore = false" class="showmore"
								src="../../assets/images/top.png" alt="" />
							<img v-if="!showmore" @click="showmore = true" class="showmore"
								src="../../assets/images/down.png" alt="" />
						</div>
					</div>
					<div class="mc-collection-accordion" v-if="showmore">
						<div class="mc-input-field">
							<div class="mc-input-base">
								<el-input v-model="num" :class="{errorww:isShowThreess,error:blurnumstyle}"
									placeholder="请输入充值金额"></el-input>
								<!-- <div class="mc-input-field-suffix">港元</div> -->

							</div>
							<div v-if="blurnumstyle" class="tips1">
								<img src="../../assets/images/zhuyitow.png" alt="">
								{{tips}}
							</div>
							<div v-if="isShowThreess" class="tips1">{{messageText}}</div>
						</div>

						<div class="mc-input-field" style="margin-top: 10px;" v-if="type == 1">
							<div class="mc-input-base">
								<el-input v-model="name" placeholder="请输入付款姓名"></el-input>
							</div>
							<div v-if="blurpsdstyle" class="tips1">
								<img src="../../assets/images/zhuyitow.png" alt="">
								{{tips1}}
							</div>
							<div v-if="isShowThreess" class="tips1">{{messageText}}</div>
						</div>
						<div class="mc-form-item" @click="drawer = true">
							<div class="mc-input-field-label">充值赠送</div>
							<div class="mc-input-base1">{{fanlitype.name}}</div>
							<img src="../../assets/images/add.png" alt="">
						</div>
						<div v-if="isShowThreess" class="tips1">{{messageText}}</div>
						<el-button @click="changetep(2)">获取付款信息</el-button>
					</div>
				</div>
			</div>
		</div>
		<div class="from" v-if="tep == 2">
			<div class="mc-collection-option">
				<div class="tep2title">
					充值金额：<span>$ {{amount}}</span>
					<font v-if="type == 3">&nbsp;&nbsp;&nbsp;USDT <span>$ {{amount_show}}</span></font>
				</div>
				<div class="tep2title" style="margin-top: 12px;font-size: 18px;">请记录以下收款资讯,并汇款</div>
				<div class="flexs" v-if="type == 1">
					<div style="display: flex;justify-content: flex-start;align-items: center;">
						<div>收款帐号：</div>
						<div class="consd">{{systemconfig.zsk_account}}</div>
					</div>
					<img @click="copyUrl(systemconfig.zsk_account)" src="../../assets/images/copy.png" alt="" />
				</div>
				<div class="flexs" v-if="type == 1">
					<div style="display: flex;justify-content: flex-start;align-items: center;">
						<div>收款帐户名：</div>
						<div class="consd">{{systemconfig.zsk_name}}</div>
					</div>
					<img @click="copyUrl(systemconfig.zsk_name)" src="../../assets/images/copy.png" alt="" />
				</div>
				<div class="flexs" v-if="type == 2">
					<div style="display: flex;justify-content: flex-start;align-items: center;">
						<div>收款二维码：</div>
					</div>
					<img class="erweima" :src="baseUrl + systemconfig.bld_pic" alt="" />
				</div>
				<div class="flexs" v-if="type == 3">
					<div style="display: flex;justify-content: flex-start;align-items: center;">
						<div>充值地址(TRC)：</div>
						<div class="consd">{{systemconfig.usdt_trc_name}}</div>
					</div>
					<img @click="copyUrl(systemconfig.usdt_trc_name)" src="../../assets/images/copy.png" alt="" />
				</div>
				<div class="flexs" v-if="type == 3">
					<div style="display: flex;justify-content: flex-start;align-items: center;">
						<div>收款二维码：</div>
					</div>
					<img class="erweima" :src="baseUrl + systemconfig.usdt_trc_pic" alt="" />
				</div>
				<div class="btns">
					<el-button @click="changetep(1)">返回重新输入</el-button>
					<el-button class="queren" @click="submit()">确认充值</el-button>
				</div>
			</div>
		</div>
		<div style="padding: 5px 15px 10px;">
			<el-carousel trigger="click" height="192px">
				<el-carousel-item v-for="(item,index) in swiperlist" :key="index">
					<img :src="item" alt="" />
				</el-carousel-item>
			</el-carousel>
		</div>
		<el-drawer :visible.sync="drawer" direction="btt" :show-close="false">
			<!-- <div class="bank-list-filter">
				<div class="filter-input-wrapper">
					<img src="../../assets/images/sousuo.png" alt="" />
					<el-input v-model="search" placeholder="输入搜寻的银行名称"></el-input>
				</div>
			</div> -->
			<div class="nrc-tabs" style="margin-top: 20px;">
				<div class="nrc-tabs-nav">
					<span class="nrc-tabs-tab" :class="tab == 0 ? 'active':''" @click="tab = 0">全部</span>
					<!-- <span class="nrc-tabs-tab" :class="tab == 1 ? 'active':''" @click="tab = 1">UVWXYZ</span> -->
				</div>
				<div class="nrc-tab-pane" v-if="tab == 0">
					<div class="item" :class="fanlitype.type == item.type ? 'active':''" v-for="(item,index) in fanli"
						:key="index" @click="selectfanli(item)">{{item.name}}</div>
				</div>
				<!-- <div class="nrc-tab-pane" v-if="tab == 1">
					<div>
						<div class="mc-bank-letter">U</div>
						<div class="mc-banks">
							<div class="item">USDT-TRC20</div>
							<div class="item">USDT-TRC20</div>
							<div class="item">USDT-TRC20</div>
						</div>
					</div>
				</div> -->
			</div>
		</el-drawer>
		<loadingFour :msgText="msgTextTow" :isShowCloseBot="isShowCloseBot" v-if="isShowLoadingTeow"
			@closeGuanbiTow="closeGuanbi"></loadingFour>
		<!-- <div class="buttons">
			<img src="../../assets/images/xiaoxi.png" alt="" />
		</div> -->
	</div>
</template>

<script>
	import {
		fanlitype,
		recharge,
		getsystemconfig
	} from "../../utils/api.js"
	import loadingFour from '../../components/loadingFour.vue';
	export default {
		data() {
			return {
				showmore: true,
				num: '',
				name: '',
				drawer: false,
				search: '',
				tab: 0,
				swiperlist: [
					require('../../assets/images/swiper1.png'),
					require('../../assets/images/swiper2.png'),
					require('../../assets/images/swiper3.png'),
					require('../../assets/images/swiper4.png'),
				],

				fanli: [],
				fanlitype: [],
				type: 1,
				tep: 1,
				systemconfig: [],

				amount: 0,
				amoutshow: 0,
				xiaoshu: 0,
				baseUrl: 'http://43.198.233.28/',

				isShowThreess: false,
				messageText: "",
				blurnumstyle: false,
				tips: '',
				blurpsdstyle: false,
				tips1: '',
				msgTextTow: "",
				isShowLoadingTeow: false,
				isShowCloseBot: false,
			}
		},
		components: {
			loadingFour
		},
		created() {
			this.type = this.$route.query.type
		},
		mounted() {
			this.getfanli()
			this.getsystem()
			this.tep = 1
		},
		methods: {
			closeGuanbi(e) {
				this.isShowLoadingTeow = false;
			},
			getfanli() {
				fanlitype().then((res) => {
					if (res.status.errorCode == 0) {
						this.fanli = res.data
						this.fanlitype = res.data[0]
					} else {
						// this.$message.error(res.status.msg);
						this.msgTextTow = res.status.msg;
						this.isShowLoadingTeow = true;
						this.isShowCloseBot = false;
						setTimeout(() => {
							this.isShowLoadingTeow = false;
						}, 2000)
						// this.$message({
						// 	showClose: true,
						// 	message: res.status.msg,
						// 	type: 'error'
						// });
					}
				}).catch((err) => {
					console.log(err, 'err')
				});
			},
			getsystem() {
				getsystemconfig().then((res) => {
					if (res.status.errorCode == 0) {
						this.systemconfig = res.data
					} else {
						// this.$message.error(res.status.msg);
						this.msgTextTow = res.status.msg;
						this.isShowLoadingTeow = true;
						this.isShowCloseBot = false;
						setTimeout(() => {
							this.isShowLoadingTeow = false;
						}, 2000)
						// this.$message({
						// 	showClose: true,
						// 	message: res.status.msg,
						// 	type: 'error'
						// });
					}
				}).catch((err) => {
					console.log(err, 'err')
				});
			},
			selectfanli(e) {
				this.fanlitype = e
				this.drawer = false
			},
			changetep(e) {
				this.tep = e;
				if (e == 2) {
					this.blurpsdstyle = false;
					this.blurnumstyle = false;
					this.tips = '';
					this.tips1 = '';
					if (!this.num) {
						this.blurnumstyle = true
						this.tips = '请输入充值金额'
						// this.$message.error('请输入充值金额');
						return false
					}
					if (this.type == 1) {
						if (this.name == '') {
							this.blurpsdstyle = true
							this.tips1 = '请输入付款姓名'
							// this.$message.error('请输入付款姓名');
							return false
						}
					}
					this.xiaoshu = parseInt(Math.random() * 40, 10);
					this.amount = Number(this.num) + Number(this.xiaoshu / 100);
					this.amount_show = (this.amount / this.systemconfig.usdt_lv).toFixed(2);
				}

			},
			submit() {
				this.isShowThreess = false;
				this.messageText = '';
				let that = this;
				let xiao = 0;
				if (this.xiaoshu < 10) {
					xiao = '0' + this.xiaoshu;
				} else {
					xiao = this.xiaoshu;
				}
				let data = {
					type: this.type,
					account: this.name,
					money: this.num,
					fanli: this.fanlitype.type,
					xiaoshu: xiao
				}
				recharge(data).then((res) => {
					if (res.status.errorCode == 0) {
						// this.$message.success(res.status.msg);
						this.msgTextTow = res.status.msg;
						this.isShowLoadingTeow = true;
						this.isShowCloseBot = true;
						setTimeout(() => {
							this.isShowLoadingTeow = false;
						}, 2000)
						// this.$message({
						// 	showClose: true,
						// 	message: res.status.msg,
						// 	type: 'success'
						// });
						setTimeout(function() {
							that.$router.go(-1)
						}, 1000)
					} else {
						this.tep = 1;
						this.isShowThreess = true;
						this.messageText = res.status.msg;
						// this.$message.error(res.status.msg);
					}
				}).catch((err) => {
					console.log(err, 'err')
				});
			},
			copyUrl(e) {
				let url = e
				let domInput = document.createElement('input');
				domInput.value = url;
				document.body.appendChild(domInput); // 添加input节点
				domInput.select(); // 选择对象;
				document.execCommand("Copy"); // 执行浏览器复制命令
				// this.$message.success(res.status.msg);
				this.msgTextTow = '复制成功！';
				this.isShowLoadingTeow = true;
				this.isShowCloseBot = true;
				setTimeout(() => {
					this.isShowLoadingTeow = false;
				}, 2000)
				// this.$message({
				// 	showClose: true,
				// 	message: '复制成功！',
				// 	type: 'success'
				// });
				domInput.remove()
			},
			goback() {
				this.$router.go(-1)
			}
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	.navbar {
		background-color: #fff;
		box-shadow: inset 0 -1px 0 #ececec;
		color: #545658;
		height: 45px;
		left: 0;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		padding: 0 10px;
		top: 0;
		width: 100%;
		z-index: 1;
	}

	.hearderBoxIcon {
		flex: .25;
		line-height: 1;
	}

	.hearderBoxIcon img {
		width: 26px;
		height: 26px;
	}

	.title {
		flex: 1;
		font-size: 20px;
		line-height: 1;
		text-align: center;
	}

	.right {
		flex: .25;
		display: flex;
		justify-content: flex-end;
	}

	.right img {
		width: 24px;
		height: 24px;
	}

	.mc-deposit-section {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 10px;
		padding: 10px 10px 0;
		margin-top: 45px;
	}

	/deep/ .el-button {
		color: #5235ff;
		background-color: #fff;
		border: 1px solid #e9e9e9;
		border-color: #5235ff;
		border-radius: 5px;
		font-size: 14px;
		margin-top: 5px;
		min-height: 32px;
		height: 44px;
		width: 100%;
	}

	.from {
		padding: 5px 15px 10px;
	}

	.mc-collection-accordion-label {
		color: #545658;
		font-size: 12px;
		line-height: 1.25;
	}

	.mc-collection-opt-warpper {
		max-height: 600px;
		overflow: auto;
	}

	.mc-collection-option {
		background-color: #fafafc;
		border: 1px solid #ececec;
		border-radius: 5px;
		margin: 10px 0 0;
		padding: 15px 10px;
		position: relative;
	}

	.mc-collection-information {
		cursor: pointer;
		display: flex;
	}

	.icon {
		width: 36px;
		height: 36px;
	}

	.tips1 {
		margin-top: 10px;
		color: #e94951;
		font-size: 13px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		text-align: right;
	}

	.tips img,
	.tips1 img {
		width: 15px;
		height: 15px;
		margin-right: 5px;
	}

	.mc-collection-content {
		align-items: center;
		display: flex;
		flex-grow: 1;
		margin: 0 5px;
	}

	.mc-collection-basic {
		flex-grow: 1;
	}

	.mc-collection-name {
		color: #545658;
		font-size: 14px;
		font-weight: 500;
		line-height: 18px;
		margin-bottom: 5px;
	}

	.mc-collection-description {
		color: #939698;
		font-size: 10px;
		line-height: 14px;
	}

	.mc-collection-fee {
		text-align: right;
	}

	.showmore {
		width: 18px;
		height: 18px;
		margin-left: 4px;
	}

	.mc-collection-accordion {
		margin-top: 20px;
	}

	.mc-input-field {
		background-color: #fff;
		border: 1px solid #ececec;
		border-radius: 5px;
		display: block;
		min-height: 54px;
		position: relative;
		transition: .8s;
	}

	.mc-input-base {
		background-color: transparent;
		color: #545658;
		display: flex;
		font-size: 16px;
		height: 52px;
		padding: 0 15px;
		position: absolute;
		top: 0;
		width: 100%;
	}

	/deep/ .el-input__inner {
		background: 0 0;
		border: none;
		color: #545658;
		flex: 1 100%;
		font-size: 14px;
		height: 100%;
		padding: 0;
	}

	/deep/ .error .el-input__inner {
		border: 1px solid #e94951;
	}

	/deep/ .errorww .el-input__inner {
		border: 1px solid #e94951;
	}

	.mc-input-field-suffix {
		align-items: center;
		color: #939698;
		display: flex;
		flex: 1 0 90px;
		justify-content: flex-end;
	}

	.mc-input-amount-field {
		border-top: 1px solid #e9e9e9;
		margin-top: 54px;
		padding: 5px 15px 0;
		padding-bottom: 10px;
		color: #a0a3a5;
		font-size: 12px;
	}

	.mc-form-item {
		margin-top: 10px;
		background: #fff;
		border: 1px solid #ececec;
		border-radius: 5px;
		display: block;
		min-height: 54px;
		position: relative;
		transition: .8s;
	}

	.mc-form-item img {
		position: absolute;
		right: 16px;
		top: 35%;
		width: 18px;
		height: 18px;
	}

	.mc-input-field-label {
		font-size: 10px;
		top: 8px;
		color: #939698;
		padding-left: 15px;
		position: absolute;
		transition: .2s;
	}

	.mc-input-base1 {
		box-shadow: none;
		font-size: 14px;
		height: 28px;
		top: 24px;
		padding: 0 15px;
		position: absolute;
		width: 100%;
		background-color: transparent;
		color: #545658;
		display: flex;
	}

	/deep/ .mc-collection-accordion .el-button {
		color: #fff;
		cursor: pointer;
		font-size: 16px;
		font-stretch: normal;
		font-style: normal;
		font-weight: 300;
		height: 44px;
		background-color: #7240ff;
		border-radius: 5px;
		margin-top: 10px;
		width: 100%;
	}

	/deep/ .el-drawer {
		height: 75vh !important;
	}

	/deep/ .el-drawer__header {
		margin: 0;
		padding: 0;
	}

	.bank-list-filter {
		padding: 10px;
	}

	.filter-input-wrapper {
		align-items: center;
		background-color: #f9f9f9;
		border: 1px solid #e0e0e0;
		border-radius: 0.25rem;
		display: flex;
		height: 2.75rem;
		justify-content: space-between;
		padding: 5px;
		position: relative;
		width: 100%;
	}

	.filter-input-wrapper img {
		width: 22px;
		height: 22px;
		margin: 0 6px;
	}

	/deep/ .filter-input-wrapper .el-input__inner {
		background-color: transparent;
		border: none;
		flex: 1;
		height: 100%;
		border-radius: 2px;
		color: #333;
		font-size: 13px;
		padding-left: 8px;
	}

	.nrc-tabs-nav {
		align-items: center;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.nrc-tabs-tab {
		height: auto;
		opacity: .7;
		box-sizing: border-box;
		display: block;
		font-size: 16px;
		font-stretch: normal;
		font-style: normal;
		font-weight: 300;
		min-width: 65px;
		text-align: center;
		padding: 4px 8px;
		width: 25%;
	}

	.nrc-tabs-tab.active {
		background-image: inherit;
		border-bottom: inherit;
		color: inherit;
		font-weight: 700;
		opacity: 1;
	}

	.nrc-tab-pane {
		padding: 24px 13px 0;
	}

	.nrc-tab-pane .item {
		flex: 1;
		height: 30px;
		align-items: center;
		display: flex;
		justify-content: center;
		border: 1px solid #000;
		/* box-shadow: 0 0 5px 2px rgba(82,53,255,.8); */
		background-color: #fafafc;
		border-radius: 5px;
		margin-bottom: 20px;
		min-height: 42px;
		padding: 7px 9px;
	}

	.nrc-tab-pane .item.active {
		border-color: rgba(82, 53, 255, .8);
		box-shadow: 0 0 5px 2px rgba(82, 53, 255, .8);
	}

	.mc-bank-letter {
		color: #545658;
		font-size: 16px;
		line-height: 22px;
	}

	.mc-banks {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.nrc-tab-pane .mc-banks .item {
		flex: 0 1 calc(50% - 10px);
		height: 30px;
		align-items: center;
		display: flex;
		justify-content: center;
		border-color: rgba(82, 53, 255, .8);
		box-shadow: 0 0 5px 2px rgba(82, 53, 255, .8);
		background-color: #fafafc;
		border-radius: 5px;
		margin-bottom: 4px;
		min-height: 42px;
		padding: 7px 10px;
		margin-top: 10px;
	}

	/deep/ .el-carousel__container img {
		width: 100%;
		height: 192px;
	}

	.buttons {
		position: fixed;
		z-index: 11111;
		bottom: 10%;
		right: 10px;
		background-color: #99D2E3;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.buttons img {
		width: 32px;
		height: 32px;
	}

	.tep2title {
		text-align: center;
		font-size: 14px;
		color: #545658;
	}

	.tep2title span {
		font-size: 18px;
		font-weight: bold;
	}

	.flexs {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
		color: #545658;
		margin-top: 20px;
	}

	.flexs .consd {
		flex: 1;
		font-size: 16px;
		font-weight: bold;
		word-break: break-all;
	}

	.flexs img {
		width: 18px;
		height: 18px;
	}

	.btns {
		margin-top: 30px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.queren {
		color: #fff;
		cursor: pointer;
		font-size: 16px;
		font-stretch: normal;
		font-style: normal;
		font-weight: 300;
		height: 44px;
		background-color: #7240ff;
		border-radius: 5px;
		width: 100%;
	}

	.flexs img.erweima {
		width: 200px;
		height: auto;
	}
</style>